<template>
	<view class="bg">
		<u-toast ref="uToast" />
		<u-modal v-model="show" title="飞行棋" :content="contentText"></u-modal>
		<view class="center_content">
			<view class="rule_text">
				<view class="">
					1.摇骰子自动走棋子
				</view>
				<view class="">
					2.每个格子都有任务,也可以自行商量执行其他任务
				</view>
				<view class="">
					3.率先走到终点的一方,获得胜利
				</view>
				
			</view>
			<view  @click="clickBlock()" :class="{'center-block': true, 'start':isStart }">
			</view>
		</view>
	
		<view class="wrap blocks">
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color1 block_left">
							<image v-show="isActive(6, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(6, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							<view class="block_label">6</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color2">
							<image v-show="isActive(5, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(5, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							
							<view class="block_label">5</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color3">
							<image v-show="isActive(4, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(4, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							
							<view class="block_label">4</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
							<image v-show="isActive(3, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(3, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							
							<view class="block_label">3</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color2">
							<image v-show="isActive(2, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(2, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							
							<view class="block_label">2</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color3 block_start" >
							<image v-show="isActive(1, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(1, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							<view class="block_label">1</view>
						</view>
					</u-col>
				</u-row>
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color3">
							<image v-show="isActive(7, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
							<image v-show="isActive(7, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
							
							<view class="block_label">7</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(28, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(28, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						<view class="block_label block_qi">
							<image  class="img_end" src="/static/icon-addr.png" alt=""/>
							
						</view>
						</view>
					</u-col>
				</u-row>
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(8, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(8, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label ">8</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(27, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(27, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">27</view>
						</view>
					</u-col>
				</u-row>
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(9, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(9, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">9</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(26, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(26, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">26</view>
						</view>
					</u-col>
				</u-row>
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(10, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(10, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">10</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(25, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(25, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">25</view>
						</view>
					</u-col>
				</u-row>
				<u-row  class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(11, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(11, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">11</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(24, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(24, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">24</view>
						</view>
					</u-col>
				</u-row>
				<u-row  class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(12, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(12, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">12</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(23, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(23, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">23</view>
						</view>
					</u-col>
				</u-row>
				<u-row  class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(13, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(13, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">13</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(22, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(22, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">22</view>
						</view>
					</u-col>
				</u-row>
				<u-row  class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(14, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(14, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">14</view>
						</view>
					</u-col>
					<u-col span="8">
					</u-col>
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(21, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(21, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">21</view>
						</view>
					</u-col>
				</u-row>
				<u-row class="block_row" gutter="16">
					<u-col span="2">
						<view class="block block_color3 block_left_bottom">
						<image v-show="isActive(15, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(15, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">15</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(16, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(16, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						<view class="block_label">16</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color3">
						<image v-show="isActive(17, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(17, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">17</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color2">
						<image v-show="isActive(18, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(18, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">18</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color1">
						<image v-show="isActive(19, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(19, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">19</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="block block_color2 block_right_bottom">
						<image v-show="isActive(20, 1)" class="img_man img_box img" src="/static/txn.jpeg" alt=""/>
						<image v-show="isActive(20, 2)" class="img_man img_box img" src="/static/txw.jpeg" alt=""/>
						
						<view class="block_label">20</view>
						</view>
					</u-col>
				</u-row>
			</view>
	</view>
</template>
 
<script>
import request from '@/common/request.js';
import Tab from '@/utils/tab.js'
import feixingqi_Data from '@/utils/data/feixingqi_content.js'
	export default {
		data() {
			return {
				blocks: [{hasClick: false}, {hasClick: false}],
				left: '9',
				flag: 1,
				show:false,
				contentText:'',
				runFlag: false,
				show: false,
				content: '',
				isStart:false,
				huohua: false,
				punishments: [],
				isStart: false,
				flag: false,
				item: "",
				databaselists: [],
				obs: {
						man: 1,
						woman: 1
				},
				guizenneirong: `
					 游戏规则<br>
					   1. 点击中间骰子，随机切换挑战玩家<br>
					   2. 被筛子选中的玩家需点击一次方块<br>
					   3. 一人点击一次方块，不要多点哦<br>
					   4. 建议播放紧张氛围的音乐<br>
					   
				`,
				content_list:[],
			}
		},
		mounted() {
			this.refresh(); 
		},
		onLoad(e) {
			const systemInfo = uni.getSystemInfoSync();
			let width = systemInfo.windowWidth < 700 ? systemInfo.windowWidth : 700;
			let blockWidth = 64;
			this.left  = width%blockWidth /2 ;
			// 计算列数
			let colNums = Number.parseInt(width/blockWidth);
			console.log('colNums', colNums)
			let num = 48; 
			// 计算行数量 
			let rowNums =  Math.ceil(num/colNums);
			console.log('rowNums', rowNums);
			
			// 补齐元素, 一些大屏手机， 不要尾部剩余元素
			const res = num % colNums;
			if (res != 0){
				num += colNums - res;
			}
			
			// 让行为偶数行， 奇数行看起来不协调
			if (rowNums%2 != 0){
				num += colNums;
			}
			
			
			// 计算中间行
			let centerRows =  Math.ceil(rowNums/2);
			console.log('centerRows', centerRows);
			// 计算中间列
			let centerCols =  Math.ceil(colNums/2);
			console.log('centerCols', centerCols);
			
			// 找到最中间的I值
			let centerI = (centerRows - 1) * colNums + centerCols;
			
			let dis = [centerI-1, centerI+1, centerI-colNums, centerI+colNums]
			dis = [centerI+1, centerI+colNums, centerI+colNums+1]
			
			// 要容纳半个屏幕
			// 随机生成一百个blocks
			let arrs = [];
			for (var i = 0; i < num; i++) {
				if (i === centerI - 1){
					arrs.push({index: i, center: true})
					continue;
				}
				if (dis.findIndex(item => item - 1 === i) > -1){
					arrs.push({index: i, hasClick: true, dis: true})
					continue;
				}
				arrs.push({index: i, hasClick: false})
			}		
			this.blocks = arrs;
			console.log(e)
			this.item = e.item;
			if(e.item==='custom'){
				const content=uni.getStorageSync('customData')
				const punishments = [];
				for (var i = 0; i < 26; i++) {
					punishments.push(content[`label${i}`])
				}
				this.punishments=punishments;
			}else{
				this.punishments=feixingqi_Data[e.item||'juchan']
				
				const value = e.item;
				if (value !== 'null'){
					let opts = {
						url: '/api/v1/modeItem/list?modeId=' + value,
						method: 'get'
					};
					uni.showLoading({
						title: '加载中'
					});
					request.httpRequest(opts).then(res => {
						uni.hideLoading();
						if (res.data && res.data.length > 0) {
							// tabData.forEach(tab => {
							// 	tab.modeList = res.data.filter(item => item.gameCode === tab.gameName);
							// })
							// this.punishments=res.data.map(item => item.content);
							this.punishments = res.data.map(item => item.content);
							this.databaselists = this.punishments; // 存一个备份
							
							// 刷新一下内容
							this.refresh()
						}
						
					});
				}
			}
			
			//根据路由传参配置列
			// this.punishments=feixingqi_Data['']
			// Object.keys(Mode).forEach(key=>{
			// 	if(value.indexOf(Mode[key]) > -1){
			// 		this.punishments=feixingqi_Data[key]
			// 	}
			// })
		},
		methods: {
			changeMan(flag) {
				this.flag = flag;
			},
			refresh() {
				// 初始化参数
				this.obs.man = 1;
				this.obs.woman = 1;
				
				// 初始化内容, 自定义的模式就不要改变顺序
				if (this.item === 'custom'){
					return;
				}
				console.log('this.databaselists', this.databaselists)
				// 随机内容
				let tmp =  []
				for (var i = 0; i < 30; i++) {  
					tmp.push(this.databaselists[Math.floor(Math.random() * this.databaselists.length)]);
				}
				console.log('tmp', tmp)
				this.punishments = tmp;
			},
			isActive(index, type){
				if (type === 1){
					return this.obs.man === index;
				} else {
					return this.obs.woman === index;
				}
			},
			clickBlock() {
				if (this.isStart || this.runFlag){
					return;//防止连续点击
				}
				this.runFlag = true;
				this.isStart = true;
				
				// 生成一个随机数， 不要走的步数太大， 不然一下就走完了
				let i2 = Math.floor(Math.random() * 3);
				let i = 1;
				
				const interval = setInterval(() => {
					let wins = false;
					if (this.flag){
						this.obs.man = 	this.obs.man + 1;
						if (this.obs.man >= 29){
							console.log('游戏结束， 男方获胜！');
							this.$refs.uToast.show({
								title: '游戏结束， 男方获胜！',
								type: 'success'
							})
							wins = true;
						};
					} else {
						this.obs.woman = 	this.obs.woman + 1;
						if (this.obs.woman >= 29){
							console.log('游戏结束， 女方获胜！');
							this.$refs.uToast.show({
								title: '游戏结束， 女方获胜！',
								type: 'success'
							})
							wins = true;
						};
					}
					i++;
					if (i > i2 || wins){
						this.runFlag = false;
						this.showDialog()
						clearInterval(interval);
						// 重新加载游戏内容
						if (wins){
							this.refresh();
						}
					}
				}, 500)
				// 切换玩家
				this.flag = !this.flag;
				// 关闭筛子动画
				setTimeout(() => {
					this.isStart = false;
					//生成随机数 
					// this.showDialog()
				}, 1000)
			},
			showDialog(){
				// let contentIndex = Math.floor(Math.random() * this.punishments.length );
				// console.log(contentIndex)
				let i = 0;
				if (this.flag){
					i = this.obs.man;
				} else {
					i = this.obs.woman;
				}
				
				this.contentText=this.punishments[i - 1]
				this.show=true
			}
		}
	}
</script>

<style lang="scss" scoped >
	page{
		height:auto
	}
	.start {
		 transform:scale(1.5);
		 animation: rotate 1s ease-out infinite;
		 animation-iteration-count: 1;
		 height:calc(100vh -44px)
	}
	.center_content{
		background-color: #eeeeee;
		// opacity: .9;
		height: 350rpx;
		width:350rpx;
		position: absolute;
		left: 50%;
		right: 0;
		top: 50%;
		bottom: 0;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 30rpx;
		padding: 30rpx;
		.rule_text{
			font-size:22rpx;
			font-weight: 600;
		}
	}
	.center-block{
		background-color: #ec79ef !important;
		background-image: url('../../../static/shaizi.png');
		background-size: cover;
		width: 120rpx;
		height: 120rpx;
		margin:auto;
		border-radius: 20rpx;
		// transform:scale(1.5);
	}
	.block{
		overflow: hidden;
		text-align: center;
		.block_label{
			margin-top: 20rpx;
			font-size: 22rpx;
			font-weight: bold;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.block_qi{
			margin-top: 0rpx;
			.img_end{
				width: 70rpx;
				height: 70rpx;
				
			}
		}
	}
	
	.img_box{
		height: 100%;
		width: 100%;
		border-radius: 18rpx;
	}
	.dis{
		// background-color: #0000004a !important;
		opacity: 0.8;
	} 
	
	@keyframes burn {
		0% {
		transform:scale(2.0);
		opacity: 0.5;
		}
		
		50% {
		transform:scale(1.8);
		opacity: 1;
		}
		100% {
		transform:scale(2.0);
		opacity: 0.5;
		}
	}
	
	.huohua {
		border-radius: #fff;
		animation: burn 1s infinite;
	}
	
	.start {
		 transform:scale(1.5);
		 animation: rotate 1s ease-out infinite;
		 animation-iteration-count: 1;
	}
	@keyframes rotate {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
	
	
	
	
	.man{
		width: 100px;
		height: 50px; 
		background-color: #0000004a;
		text-align: center;
		.man-png{
			width: 50px;
			height: 50px; 
		}
	}
	.bg {
		margin: auto;
		// max-width: 390px;
		// .sz{
		// 	width: 100px;
		// 	height: 100px;
		// 	position: absolute;
			// background-color: #fff;
		// 	top: 50%;
		// 	left: 50%;
		// }
		height: calc(100vh - 60px);
		width: calc(100%);
		padding-top: 10px;
	}
	.vis{
		opacity: 0;
	}
	.blocks{
		height:calc(100vh -  100px);
		// margin: auto;
		// width: 400px;
		padding: 10rpx;
		// margin-top: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		color: #fff;
		flex-direction: column;
		// align-items:;
		// gap:18px;
		.block{
			background-color: #bb96d1;
			height: calc(100vw / 10);
			width: calc(100vw / 9);
			border-radius: 10rpx;
			// margin-right: 10rpx;
			// margin-bottom:10rpx;
			background-image: linear-gradient(45deg,#fcb69f 30%,#ffecd2);
			
			// align-items: center;
		}
		.center-block{
			background-color: #ec79ef !important;
			background-image: url('../../../static/shaizi.png');
			background-size: cover;
			position: relative;
			left: 30rpx;
			top: 30rpx;
			transform:scale(1.5);
		}
		.block_row{
			// margin-bottom:10rpx;
			width:100%;
			display: flex;
			justify-content: space-between;
			// align-items:flex-start; 
			align-items: center;
		}
		.block_color1{
			// background-image: linear-gradient(45deg,#fcb69f 30%,#ffecd2);
			background-image: linear-gradient(45deg,#7153e0,30%,#83bbd1);
			
		}
		.block_color2{
			background-image: linear-gradient(45deg,#a4c7fd,30%,#bee4fb);
		}
		.block_color3{
			background-image: linear-gradient(45deg,#fca781,30%,#e95a5a);
		}
		.block_start{
			border-top-right-radius:40rpx;
			border-bottom-right-radius:40rpx;
		}
		.block_left{
			border-top-left-radius:40rpx;
		}
		.block_left_bottom{
		border-bottom-left-radius:40rpx;
		}
		.block_right_bottom{
		border-bottom-right-radius:40rpx;
		}
	}
</style>
